<template>
    <div class="memberinfo-layout" >
        <div class="info-back  search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="back-icon" @click="back">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
                <el-col :span="10" class="btns">
                    <el-button type="text" class="save red-btn" @click="onSubmit('formInfo')">
                        保存
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div class="member-info-title">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="活动信息" name="first" class="c-def">
                    <!--<keep-alive v-if="formInfo.name">-->
                    <div class="member-info-form">
                        <el-form label-width="100px" ref="formInfo" :rules="formInfoRules" :model="formInfo">
                            <el-form-item label="活动名称：" prop="name">
                                <el-input v-model="formInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="活动编码：" prop="code">
                                <el-input v-model="formInfo.code"></el-input>
                            </el-form-item>
                            <el-form-item label="活动单价：" prop="price">
                                <el-input v-model="formInfo.price"></el-input>
                            </el-form-item>
                            <el-form-item label="创建人：" prop="account">
                                <el-input v-model="formInfo.creatorName" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="状态：" prop="state">
                                <div class="el-left">
                                    <el-switch on-text="启用"
                                               off-text=""
                                               v-model="status"
                                               on-color="#13ce66"
                                               off-color="#cacaca"
                                    ></el-switch>
                                </div>
                            </el-form-item>
                            <el-form-item label="创建时间：" prop="createTime">
                                <el-input v-model="formInfo.createTime" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="备注：" prop="remark" class="member-mark">
                                <el-input type="textarea" v-model="formInfo.remark"></el-input>
                            </el-form-item>
                            <el-form-item label="图片：" prop="upload" class="avatar-uploader">
                                <div class="el-upload el-upload--text">
                                    <img v-if="hasPic" :src="imageUrl" class="avatar">
                                    <img v-else src="../../../../static/img/goods.png" style="width: 100%">
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!--</keep-alive>-->
                </el-tab-pane>
                <el-tab-pane label="活动详情" name="second"class="c-def">
                    <div class="memeber-manage-con" id="myDIV">
                        <waterfall
                                :line-gap="250"
                                :max-line-gap="360"
                                :min-line-gap="230"
                                :fixed-height="true"
                                :watch="items"
                                align="center">
                            <waterfall-slot
                                    :width="250"
                                    :height="230"
                            >
                                <div class="member-layout storage item" style="height: 230px;">
                                    <div class="grid-content bor-radius-10 mg-bo-10 pos-relative card-row add-row"
                                    >
                                        <mu-paper class="demo-paper" :zDepth="2" >

                                            <div class="card-01 card-storage">

                                                <img src="../../../../static/img/add.png" alt="" @click="toChange">
                                            </div>

                                        </mu-paper>

                                    </div>
                                </div>
                            </waterfall-slot>
                            <!-- each component is wrapped by a waterfall slot -->
                            <waterfall-slot
                                    v-for="(item, index) in actItem"
                                    :width="250"
                                    :height="230"
                                    :order="index"
                                    :key="item.id"
                            >
                                <div >
                                    <v-billcomp
                                            :item="item"
                                            :index="index"
                                            class="item"
                                            :isGoods="isGoods"
                                            :currentRadio ="currentRadio"
                                            :isMutpart="isMutpart"
                                            :backSelectItems="selectItems"
                                            :backItems="getCurrentSelectItems"
                                            :delClose="delClose"
                                            :isClose="isClose"
                                            :viewClick="function(){del(item)}"
                                            :isSelectBox="false"
                                    >
                                        <div class="text">
                                            <h6 class="l1">{{item.goods.name}}</h6>
                                            <span class="l1"><span class="span1">原价</span>{{ Number(item.goods.price || 0.00).toFixed(2) }}</span>
                                            <span><span class="span2">会员价</span>{{ Number(item.price || 0.00).toFixed(2) }}</span>
                                            <span class="text-numspan">
                                    <div class="quantity-h">
                                        <span >数量 </span>
                                        <span v-show="!changeSure[index]">{{ item.quantity }}</span>
                                        <input type="number" class="text-number" :min="0" v-model="item.quantity" @change="handleChange"
                                               v-show="changeSure[index]">
                                    </div>
                                    </span>
                                        </div>
                                        <div class="tr" v-if="isNew">
                                            <span @click="changeNum(index,item,changeSure[index])" v-show="!changeSure[index]">修改</span>
                                            <span @click="saveNum(index,item,changeSure[index])"
                                                  v-show="changeSure[index]">确定</span>
                                        </div>
                                        <div v-if="!isNew">
                                            <span>&nbsp;</span>
                                        </div>
                                    </v-billcomp>
                                </div>
                            </waterfall-slot>

                        </waterfall>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import vSimpsearch from '../SimpSearch.vue';
    import * as type from '../../../store/types';
    import vBillcomp from '../../common/BillComp.vue';
    //    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    //    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import Waterfall from '../../common/waterfall/Waterfall.vue';
    import WaterfallSlot from '../../common/waterfall/waterfall-slot';
    export default {
        name: "keepaliveactiveinfo",
        components: {
            vSimpsearch,vBillcomp,Waterfall, WaterfallSlot
        },
        data: function () {
            return {
                loading: false,
                activeName: 'first',
                items: [],
                imageUrl: '',
                Actid: '',
                static_url: this.$cfg.static_url + "/",
//                uploadUrl:this.$cfg.api_url+"/vue-uploads",
                userId: '',
                formInfo: {},
                formInfoRules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'change'}
                    ],
                    price: [
                        {required: true, pattern: /^[0-9.]*$/, message: '活动单价为必填项且必须为数字', trigger: 'change'},

                    ],
                    code: [
                        {pattern: /^[0-9a-zA-Z]*$/, message: '活动编码只能为数字和字母', trigger: 'change'}
                    ]
                },
                hasPic:true,
                actItem: '',
                status: true,
                state: '',
                open: false,
                list: [],
                num: [0],
                changeSure: [],
                isGoods: true,
                selectItems: [],
                currentRadio: {index:-1},
                isMutpart:false,
                page: 1,
                totalPage: 1,
                quantity:0,
                selectGoods:'',
                delClose:true,
                selectDel:'',
                isNew:true,
            }
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            },
        },
        mounted: function () {
            this.page = 1;
            this.totalPage = 1;
            this.actItem='';
            this.num=[];
            console.log("=============>mounted")
            this.$$("#content").scrollTop(0)
            let self = this;
            console.log(this.$$("#content").innerHeight())
            console.log(this.$$("#content")[0].scrollWidth)
            this.rows = Math.floor(self.$$("#content")[0].scrollWidth / 300) * Math.floor(self.$$("#content").innerHeight() / 220)
            console.log('*(******************' + this.rows)
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            })
            this.$$(window).resize();
        },
        activated: function () {
            let backInfo = this.$route.params;
            this.page = 1;
            this.totalPage = 1;
            this.$$("#content").scrollTop(0)
            this.actItem='';
            this.num=[];
            this.delClose = true;
            if (backInfo.item) {
                this.activeName = 'first';
                this.Actid = backInfo.id;
                this.formInfo=backInfo.item;
                this.isNew=true;
                this.actItem=this.formInfo.entries;
                this.imageUrl = this.$cfg.static_url + "/" + this.formInfo.pictureNames;
                if(this.formInfo.pictureNames==''){
                    this.hasPic=false;
                }else{
                    this.hasPic=true;
                }
                if (this.formInfo.state == 1) {
                    this.status = true;
                } else {
                    this.status = false;
                }

            }else {

            }
            if (backInfo.new){
                this.activeName = 'first';
                this.loading = false;
                this.status =true;
                this.formInfo = {
                    name: '',
                    code:'',
                    price:'',
                    account: '',
                    password:'',
                    tel: '',
                    email: '',
                    // state: '',
                    createTime: '',
                    remark: '',
                    imageUrl: ''
                };
                this.imageUrl = '';

            }else{

            }
            if (backInfo.isBack) {
                this.loadMore();
                this.activeName = 'second';
                this.isClose = true;
                this.$$(window).resize();
                if (this.formInfo.state == 1) {
                    this.status = true;
                } else {
                    this.status = false;
                }
            }else{
                this.isClose = false;
            }
            if (backInfo.args) {
                this.activeName = 'second';
                this.isClose = true;
                this.actItem=backInfo.args;
                this.formInfo.actItem=this.actItem;
                this.$$(window).resize();
                for(var i=0;i<this.actItem.length;i++){
                    this.$set(this.changeSure, i, true);
                }
                this.isNew=false;
                if (this.formInfo.state == 1) {
                    this.status = true;
                } else {
                    this.status = false;
                }
            }else{
                this.isNew=true;
            }

        },
        methods: {
            loadMore() {
                console.log("==============>loadMore")
                console.log(this.totalPage)
                if (this.page <= this.totalPage) {
                    this.loading = true;
                    this.Actid = this.$route.params.item.id;
                    let self = this;
                    this.$axioxs.get('/goods_package/' + self.Actid + '/entries?states=0,1')
                        .then(function (res) {
                            self.totalPage = res.data.totalPage;
                            self.actItem = res.data;
                            self.actItem.forEach(item => {
                                item.height = 265;
                                item.width = 300;
                                self.items.push(item);
                            });
                            self.loading = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: error,
                                onClose:function () {
                                    self.loading = false;
                                }
                            });
                        });
                }
            },
            handleChange(value) {
//                item.quantity = value;

            },
            handleClick(tab, event) {
                if (this.activeName == 'first') {

                } else if (this.activeName == 'second') {
                    this.$$(window).resize();
                    this.totalPage=1;
                    this.isClose = true;
                    if (this.status == true) {
                        this.formInfo.state = "1";
                    } else {
                        this.formInfo.state = "0";
                    }
                    if(this.formInfo.id){
                        this.loadMore();
                    }else {

                    }
                }
            },
            info:function (item) {
                console.log(12)
            },
            del: function (item) {
                console.log(111111)
                if(this.formInfo.id){
                    let self = this;
                    this.$axioxs.delete('/goods_package/entry/' + item.id)
                        .then(function (res) {
                                console.log('删除成功')
                                self.$message({
                                    showClose: true,
                                    message: '删除成功',
                                    type: 'success'
                                });
                                self.actItem.splice(self.actItem.indexOf(item), 1)
                                self.activeName = "second";
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                }else{
                    this.actItem.splice(this.actItem.indexOf(item), 1)
                }

            },
            changeNum: function (index, item, changeSure, toSure) {
                this.$set(this.changeSure, index, true);
                this.num[index] = item.quantity;
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
                this.selectDel = items;
            },
            saveNum: function (index, item, changeSure, toSure) {

                this.$set(this.changeSure, index, false);
                var quantity = this.num[index];
                let args = {
                    goodId: item.goods.id,
                    goodName: item.goods.name,
                    goods: {
                        id: item.goods.id
                    },
                    id: item.id,
                    owner: {
                        id: this.$route.params.item.id
                    },
                    price: item.price,
                    quantity: item.quantity,
                    ver: item.ver

                };
                if(quantity!=item.quantity ){
                    let self = this;
                    this.$axioxs.post('/goods_package/entry', args)
                        .then(function (res) {
                                self.loadMore();
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            }
                        )
                }

            },
            toChange: function () {
                this.$store.commit(type.CHANGE_INDEX, '/goodsComp');
                console.log(this.$route.params)

                if(this.formInfo.id){
                    this.$router.push({
                        name: 'goodsB',
                        path: '/goodsComp',
                        params: {
                            'url': "/goods/?states=1",
                            'saveurl': "/goods_package/saveEntries/",
                            'backurl': "/activityInfo",
                            'activeName': "second",
                            'item': this.formInfo,
                            'backName': 'activityA',
                            'isActivityPage':'isActivityPage',
                        },
                    });
                }else{
                    this.$router.push({
                        name: 'goodsB',
                        path: '/goodsComp',
                        params: {
                            'url': "/goods/?states=1",
                            'backurl': "/activityInfo",
                            'activeName': "second",
//                            'item': this.$route.params.item,
                            'backName': 'activityA',
                            'isActivityPage':'isActivityPage',
                            'actItem':this.actItem||[],
                            'item': this.formInfo
                        },
                    });
                }

            },
            onSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        let args = this.formInfo;
                        console.log(args)

                        if (this.status == true) {
                            args.state = "1";
                        } else {
                            args.state = "0";
                        }
                        args.entries = [];
                        var entryList =this.actItem;
                        let self = this;
                        if(this.formInfo.id){
                            this.$axioxs.post("/goods_package/", args)
                                .then(function (res) {
                                        self.back();
                                    },
                                    (res) => {
                                        this.$message({
                                            showClose: true,
                                            type: 'error',
                                            message: res
                                        });
                                    });
                        }else{
                            console.log(entryList)
                            var arr=[];
                            for(var i=0;i<entryList.length;i++){
                                var objGood={};
                                objGood.goods={};
                                objGood.goods.id=entryList[i].id;
                                objGood.quantity =entryList[i].quantity;
                                arr.push(objGood)
                            }
                            args.entries = arr;
                            this.$axioxs.post("/goods_package/save", args)
                                .then(function (res) {
                                        self.back();
                                    },
                                    (res) => {
                                        this.$message({
                                            showClose: true,
                                            type: 'error',
                                            message: res
                                        });
                                    });
                        }
                    }
                });
            },
            back: function () {
                this.$store.commit(type.CHANGE_INDEX, '/activity');
//                this.activeName = "first";
                this.$router.push({
                    name: '',
                    path: '/activity',
                });
            }
        }
    }
</script>

<style scoped>


    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .close-del {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .close-fa-circle {
        font-size: 1.25em;
    }
    .member-info-title {
        padding-top: 60px;
    }

    .member-info-form {
        width: 90%;
        padding-top: 0px;
        margin: 0 auto;
    }

    .img {
        width: 80px;
        height: 80px;
        margin: 10px auto;
    }
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }
    #myDIV {
        margin: 0px 20px;
    }


    .text {
        margin-bottom: 1em;
    }

    .text h6 {
        margin-bottom: 5px;
    }

    .span1 {
        background-color: #3eb3f9;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .span2 {
        background-color: #6699ff;
        border-radius: 20px;
        padding: 2px 5px;
        color: #fff !important;
        font-size: .8em;
        margin-right: 3px;
    }

    .remark {
        padding: 3px 0;
    }
    .text-number{
        width: 60%;
        height: 27px;
        border: 1px solid #cacaca;
        border-radius: 3px;
    }
    .text-numspan{
        display: block;
    }
    .quantity-h{
        height:30px;
        line-height: 30px;
    }
    .card-storage{
        height:215px;
        padding: 4em 0;
    }
    .c-def{
        cursor: default;
    }
    /*.add-row{*/
        /*margin: 5px;*/
    /*}*/
</style>
